<!-- src/components/AclList/AclView.vue -->
<script setup>
import { ref, onMounted, watch } from 'vue'
import { AclApi } from "@/api/acl/index.js"

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue'])

const acls = ref([])
const aclsData = ref([])

// 监听 modelValue 变化，同步到本地 acls
watch(() => props.modelValue, (newVal) => {
  acls.value = [...newVal]
}, { immediate: true })

onMounted(() => {
  AclApi.list().then(res => {
    // 根据实际返回数据结构调整
    if (res.data && res.data.list) {
      aclsData.value = res.data.list
    } else if (Array.isArray(res.data)) {
      aclsData.value = res.data
    } else {
      console.warn('权限数据格式异常:', res.data)
    }
  }).catch(error => {
    console.error('获取权限列表失败:', error)
  })
})
</script>

<template>
  <el-select multiple v-model="acls" placeholder="请选择权限" style="width: 100%">
    <el-option
        v-for="item in aclsData"
        :key="item.id"
        :label="item.name"
        :value="item.id"
    ></el-option>
  </el-select>
</template>

<style scoped>
</style>
